<template>
  <el-dialog :title="dTitle" :visible.sync="visible" width="60%" :before-close="closeDialog">
    <el-form ref="form" :model="form" label-width="80px" class="adddia-top">
      <el-form-item>
        <el-input v-model="form.name" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="供应商">
        <el-select v-model="form.region" placeholder="全部">
          <el-option v-for="(item,index) in options" :key="index" :label="item.SupplierName" :value="item.SupplierId"></el-option>
        </el-select>
      </el-form-item>
      <el-button>重置</el-button>
      <el-button @click="search">查询</el-button>
    </el-form>
    <!-- <el-button style="margin:30px 10px" @click="adds">添加</el-button> -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
     <!-- @selection-change="handleSelectionChange" -->
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->
      <el-table-column label="商品编号" prop="ProductNumber"></el-table-column>
      <el-table-column label="商品名称" prop="ProductName"></el-table-column>
      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope" >
          <div class="imgDiv">
          <div class="flex-style" v-for="(item,index) in scope.row.ProductPhoto" :key="index">
            <el-image class="flex-style-img" v-image-preview style="width:50px;height:50px" :src="item"></el-image>
          </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="SoloProductModels" label="商品规格" width="150"></el-table-column>
      <el-table-column prop="SupplierName" label="供应商"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="setPNumber(scope.row.ProductNumber)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <botpage
      :currentPage="currentPage"
      :PageSize="PageSize"
      :total="total"
      @handleCurrentChange="currentChange"
      @pageSizeChange="pageSizeChange"
    />
  </el-dialog>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import { SelectProducts, EditGroupBuyProductList, LoadSuppliers } from "@/request/api";
export default {
  components: {
    Botpage,
  },
  props: {
    dTitle: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      ProductNumber:"",
      currentPage: 1,
      PageSize: 10,
      total: 1,
      // closeDialog:false,
      // GBnumber:null
      tableData: [],
      form: {},
      addList:[],
      dataNumber:"",
      options:[]
    };
  },
  watch: {
    formData(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal) {
        this.form = { ...newVal }
        console.log(this.form)
        console.log(this.form.GBNumber)
      }
    },
  },
  methods: {
    getSelect(){
      LoadSuppliers().then(res => {
        this.options = res.Data;
        console.log('-------select--------',this.options)
      })
      .catch(err => {
        console.log(err)
      })
    },
    search(){
      this.getTabelData()
    },
    getTabelData() {
      SelectProducts({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        SupplierId: this.form.region,
        SreachValues:this.form.name
      })
        .then((res) => {
          this.tableData = res.Data;
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
          var that = this;
          for (let i in this.tableData) {
            if (
              this.tableData[i].ProductPhoto !==null &&
              this.tableData[i].ProductPhoto !== "" &&
              this.tableData[i].ProductPhoto !== undefined
            ) {
              that.tableData[i].ProductPhoto =that.tableData[i].ProductPhoto.split("|")
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    setPNumber(num) {
      this.ProductNumber = num;
      console.log("ProductNumber=" +this.ProductNumber)
      console.log(this.form.GBNumber)
      EditGroupBuyProductList({
        ProductNumber: this.ProductNumber,
        GBNumber : this.form.GBNumber
      })
      .then(res => {
        if(res.StatusCode ===200) {
          this.dataNumber = res.Data;
          console.log(this.dataNumber)
          this.$emit('getNumber',this.dataNumber)
          this.$confirm("添加商品成功！", "添加提示", {})
          this.closeDialog()
          this.$parent.getInfo()
        }
      })
      .catch(err => {
        console.log(err.Message)
      })
    },
    closeDialog(reload) {
      //子传父
      this.$emit("closeDialog", reload);
    },
    handleSelectionChange(val) {
      console.log("less");
      this.addList = val
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTabelData();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTabelData();
    },
  },
  mounted() {
    this.getTabelData();
    this.getSelect()
  },
};
</script>

<style lang="less" scoped>
.adddia-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}
.imgDiv {
  width: 100%;
  display: flex;
  overflow: hidden;
  .flex-style {
    overflow: hidden;
    .flex-style-img {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>